<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>音视频分离</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        body {
            padding: 20px;
            background: #fff;
        }

        .container {
            /* max-width: 1200px; */
            width: 100%;
            margin: 0 auto;
        }

        .input-group {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            gap: 10px;
        }
        /* 遮罩层 */ .overlay { display: none; position: fixed; top: 0; left: 0;
        width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1;
        } /* 弹窗样式 */ .modal { display: none; position: fixed; top: 50%; left: 50%;
        transform: translate(-50%, -50%); background: #fff; padding: 20px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); z-index: 2; width: 300px; text-align: center;
        } /* 关闭按钮 */ .close-btn { background-color: #f44336; color: white; border:
        none; padding: 5px 10px; cursor: pointer; border-radius: 5px; } .close-btn:hover
        { background-color: #d32f2f; }
        table {
            border-collapse: collapse; /* 合并边框 */
            border: none; /* 隐藏表格边框 */
        }
        th, td {
            border: none; /* 隐藏单元格边框 */
            padding: 10px; /* 添加一些内边距 */
        }

        .progress-section {
            margin: 20px 0;
        }

        .progress-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            color: #666;
        }

        .progress-bar {
            width: 100%;
            height: 4px;
            background: #f5f5f5;
            border-radius: 2px;
            margin-bottom: 20px;
        }

        .progress-value {
            text-align: right;
            color: #666;
            font-size: 14px;
        }

        .log-section {
            margin-top: 20px;
        }

        .log-label {
            color: #666;
            margin-bottom: 10px;
        }
    </style>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
</head>
<body>

    <div id="overlay" class="overlay" onclick="closeModal()"></div>

    <div id="modal" class="modal">
        <p id="message">消息弹窗</p>
        <!-- TODO: 调整消息弹窗样式 -->
        <button class="close-btn" onclick="closeModal()">关闭</button>
    </div>

    <div class="container">
        <div class="input-group">
            <label>素材目录:</label>
            <label for="clipInput"></label><input type="text" id="clipInput" placeholder="请选择视频文件/文件夹" onclick="clipInput('clipInput')" value="">
            <span id="clipInputCount">视频数量: 0</span>
        </div>
        <button class="btn btn-primary" onclick="start_work()">开始分离音视频</button>
        <div class="input-group">
            <label>导出目录:</label>
            <label for="clipOutput"></label><input type="text" onclick="chooseFolder('clipOutput')" id="clipOutput" placeholder="请选择文件夹" value="">
        </div>
        <a href="#" class="btn btn-primary" onclick="openFile('clipOutput')" >打开文件夹</a>
        <div class="progress-section">
            <div class="progress-label">任务进度:</div>
            <div class="progress-bar"></div>
            <div class="progress-value">0.00%</div>
        </div>

        <div class="log-section">
            <div class="log-label">任务日志输出:</div>
        </div>
    </div>

    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            new QWebChannel(parent.qt.webChannelTransport, function (channel) {
                Bridge = channel.objects.Bridge;

                Bridge.started.connect(function (msg) {
                    showModal(msg)
                });
                Bridge.finished.connect(function (msg) {
                    showModal(msg)
                });
                Bridge.failed.connect(function (msg) {
                    showModal(msg)
                });

                /*  文件操作方法  */
                // 选择文件夹
                window.chooseFolder = function (eid) {
                    Bridge.choose_folder(eid);
                };
                window.clipInput = function () {
                    Bridge.choose_folder_and_read_video_files("clipInput")
                };

                // 打开文件或者文件夹
                window.openFile = function (eid) {
                    let path = document.getElementById(eid).value;
                    if (path) {
                        Bridge.open_file(path);
                    }
                };

                // 选择的文件夹信号槽
                Bridge.select_folder_result.connect(function (eid, path) {
                    document.getElementById(eid).value = path;
                });
                // 返回智能分镜目录
                Bridge.select_files_result.connect(function (eid, files, count) {
                    // 更新选择的文件数量
                    document.getElementById("clipInputCount").innerText = "视频数量: " + count;
                });


                /*  操作逻辑  */
                // 开始分镜
                window.start_work = function () {
                    let clip_path = document.getElementById("clipInput").value;
                    let output_path = document.getElementById("clipOutput").value;
                    if (!clip_path){
                        showModal("请选择素材");
                        return;
                    }
                    if (!output_path){
                        showModal("请选择导出目录");
                        return;
                    }
                    let task_items = {
                        "task": "音视频分离",
                        "clip_path": clip_path,
                        "output_path": output_path
                    }
                    if (clip_path && output_path) {
                        Bridge.start_worker(JSON.stringify(task_items));
                    } else {
                        showModal("请选择素材目录和导出目录");
                    }
                };


            });

            window.showModal = function (message) {
                        document.getElementById("message").innerText = message;
                        document.getElementById("overlay").style.display = "block";
                        document.getElementById("modal").style.display = "block";
                    };

            window.closeModal = function () {
                        document.getElementById("overlay").style.display = "none";
                        document.getElementById("modal").style.display = "none";
                    };

    });
    </script>
</body>
</html> 